<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/common/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
	<style type="text/css">


	</style>
<link href="${ctx}resources/css/select/bootstrap-select.css" rel="stylesheet" type="text/css">
<%@ include file="/WEB-INF/common/head.jsp"%>
</head>
<body class="${cookie.bodyClass.value}">
	<div class="container body">
		<div class="main_container">
			<%@ include file="/WEB-INF/common/left.jsp"%>
			<%@ include file="/WEB-INF/common/top.jsp"%>
			<!-- page content -->
			<div class="right_col" role="main" id="main">
				<div class="x_panel">
					<div class="x_title">
						<h2>广告详情</h2>
						<div class="clearfix"></div>
					</div>
					<div class="x_content">
						<div class="modal-body">
							<form role="form" data-parsley-validate id="bannerForm" class="form-horizontal">
								<input id="bannerId" name="bannerId" type="hidden" value="${banner.bannerId}" /> 
								<input id="objectContent" name="objectContent" type="hidden" value="${banner.objectContent}" />
								<div class="form-group item">
									<label for="name" class="col-sm-3 control-label">标题:<font color="red">*</font>
									</label>
									<div class="col-sm-6">
										<input type="text" class="form-control" id="title" name="title" value="${banner.title}" placeholder="标题" required='required'
											data-parsley-length="[0,100]">
									</div>
								</div>
								<div class="form-group item" >
									<label for="name" class="col-sm-3 control-label">弹窗类型:<font color="red">*</font>
									</label>
									<div class="col-sm-6"> 
										<select class="form-control"   id="objectType" name="objectType"  required="required" onchange="placeChange()">
											<option value="">请选择</option>
											<option value="0">内链</option>
											<option value="1">外链</option>
										</select>
									</div>
								</div>
								<div class="form-group item" id="place-1" style="display:none;" onchange="objectContentChange()">
									<label for="name" class="col-sm-3 control-label">链接类型:<font color="red">*</font>
									</label>
									<div class="col-sm-6">
										<select id="place" name="place" class="form-control" required="required">
											<option value="">请选择</option>
											<option value="0">商品</option>
										</select>
									</div>
								</div>
								<div class="form-group item" id="objectContent-1" style="display:none;">
									<label for="name" class="col-sm-3 control-label">链接对象:<font color="red">*</font>
									</label>
									<div class="col-sm-6" id="objectContentDiv1"  style="display:none;">
										<input type="text" class="form-control" id="objectContent1" name="objectContent1" value="${banner.objectContent}" placeholder="链接对象" required='required'
											   data-parsley-length="[0,100]">
									</div>
								</div>
								<div class="form-group item" id="objectContent-2"  style="display:none;">
									<label for="name" class="col-sm-3 control-label">链接对象:<font color="red">*</font>
									</label>
									<div class="col-sm-6" id="objectContentDiv2"  style="display:none;">
										<select id="objectContent2" name="objectContent2" class="form-control" required="required" >
										</select>
									</div>
								</div>
								<div class="form-group item">
									<label for="url" class="col-sm-3 control-label">图片:<font color="red">*</font>
									</label>
									<div class="col-sm-6">
										<input type="hidden" id="imageUrl" name="img" value="${banner.img}" /> <img src="${ctx}resources/images/zanwutupian.jpg"
											id="showImage" width="100px;" height="100px;">
										<button type="button" class="btn btn-primary btn-sm" style="display: block;width: 100px;margin-top: 10px;">上传图片</button>
										<input type="file" id="fileLogo" name="file" class="hideFile" onchange="uploadImage(this)" />
										<font color="red"><!-- 建议图片比例上传16:9的图片 -->
											建议上传800*450大小的图片，仅支持jpg，png等格式
										</font>
									</div>
								</div>
							</form>
						</div>
						<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="text-align:center">
							<button type="button" class="btn btn-dark btn-sm" onclick="back();">返回</button>
							<button type="button" class="btn btn-primary btn-sm" onclick="save();">保存</button>
						</div>
					</div>
				</div>
			</div>
			<!-- /page content -->
			<%@ include file="/WEB-INF/common/foot.jsp"%>
		</div>
	</div>
	<%@ include file="/WEB-INF/common/script.jsp"%>
	<script type="text/javascript" src="${ctx}resources/js/ajaxfileupload.js"></script>
	<script src="${ctx}resources/js/select/bootstrap-select.js"></script>
	<script type="text/javascript">
		function uploadImage(obj) {
			var fileId = $(obj).attr("id");
			swal({
				"title" : "",
				"text" : "正在处理……请稍后",
				"showConfirmButton" : false
			});
			$.ajaxFileUpload({
				url : ctx + "admin/upload/uploadImg?dir=banner", //用于文件上传的服务器端请求地址
				secureuri : false, //是否需要安全协议，一般设置为false
				fileElementId : fileId, //文件上传域的ID
				dataType : 'json', //返回值类型 一般设置为json
				success : function(data, status) //服务器成功响应处理函数
				{
					data = $.parseJSON(data);
					if (data.status == 0) {
						$("#showImage").attr("src", data.data.src);
						$("#imageUrl").val(data.data.img)
						swal.close();
					} else {
						swal({
							title : "",
							text : data.msg,
							type : "error"
						});
					}
				},
				error : function(data, status, e)//服务器响应失败处理函数
				{
					swal({
						title : "",
						text : data.msg,
						type : "error"
					});
				}
			});
		}
		function back() {
			window.location = ctx + "admin/banner/toBannerPage";
		}
		$(function() {
			placeChange();initObjectContent();
			var bannerId = $("#bannerId").val();
			if (bannerId != "") {
				$("#objectType").val('${banner.objectType}');
				$("#objectType").change();
				$("#place").val('${banner.place}');
				if (${banner.objectType}==0) {
					$("#objectContent2").val('${banner.objectContent}');
				}if (${banner.objectType}==1) {
					$("#objectContent1").val('${banner.objectContent}');
				}
				$("#imageUrl").val("${banner.img}");
				$("#showImage").attr("src",'${imgDomain}'+'/'+'${banner.img}');
			}
		});
		function initObjectContent(){
			$.ajax({
				url : ctx + "admin/banner/findCommodityList",
				type : 'post',
				data : {},
				dataType : "json",
				async : false,
				success : function(data) {
					var contentHTML = "<option value=''>请选择</option>";
					$.each(data, function(i, item) {
						contentHTML += "<option value='"+item.commodityId+"'>"
								+ item.commodityName + "</option>";
					});
					$("#objectContent2").html(contentHTML);
				}
			});
		}
		function placeChange() {
			var objectType = $("#objectType").val();
			if(objectType == ""){
				$("#place-1").hide();
				$("#objectContent-1").hide();
				$("#objectContent-2").hide();
				$("#objectContentDiv1").hide();
				$("#objectContentDiv2").hide();
			}else if (objectType == 0) {
				$("#place-1").show();
				$("#objectContent-1").hide();
				$("#objectContent-2").show();
				$("#objectContentDiv1").hide();
				$("#objectContentDiv2").show();
				$("#place").attr("required",true);
				$("#objectContent2").attr("required",true);
				$("#objectContent1").attr("required",false);
			}else if(objectType == 1){
				$("#place-1").hide();
				$("#objectContent-1").show();
				$("#objectContent-2").hide();
				$("#objectContentDiv2").hide();
				$("#objectContentDiv1").show();
				$("#place").attr("required",false);
				$("#objectContent1").attr("required",true);
				$("#objectContent2").attr("required",false);
			} 
		}
		function save() {
			if (!$('#bannerForm').parsley().validate()) {
				swal({
					title : '',
					text : "请完善信息",
					type : "info"
				});
				return;
			}
			var objectType=$("#objectType").val();
			var objectContent="";
			if (objectType==0) {
				objectContent= $('#objectContent2').val();
			} else if (objectType==1){
				objectContent= $('#objectContent1').val();
			}
			$("#objectContent").val(objectContent);
			swal({
				"title" : "",
				"text" : "正在处理……请稍后",
				"showConfirmButton" : false
			});
			$.ajax({
				url : ctx + "admin/banner/saveBanner",
				dataType : "json",
				data : $("#bannerForm").serialize(),
				success : function(result) {
					if (result.status == "0") {
						swal({
							title : '',
							text : "保存成功"
						}, function() {
							back();
						});
					} else {
						swal({
							title : '',
							text : result.msg,
							type : "error"
						});
					}
				}
			});
		}
	</script>
</body>
</html>